<template>
  <div v-if="goodsList.length" class="gundongchuchuang">
    <div class="boardGoods">
      <div v-if="module.modules[0] && module.modules[0].bg" style="margin-bottom: 15px">
        <img
          :src="fileBaseUrl + module.modules[0].bg"
          class="board-bg"
          style="height: 26px"
        >
      </div>
      <div v-else class="flex-x title-div">
        <div class="title-text">{{ module.modules[0].title }}</div>
        <div class="subtitle-text">{{ module.modules[0].subTitle }}</div>
      </div>
      <div class="sroll_box">
        <div class="flex-x">
          <div v-for="(item, index) in goodsList" :key="item.id">
            <div v-if="index % 2 == 0" class="boardGoods-item-scroll">
              <img
                :src="fileBaseUrl + item.coverImg"
                class="board-img"
                style="width:100px"
              >
              <div class="board-title app-space-ell-1">{{ item.title }}</div>
              <div class="board-price">￥小程序查看</div>
            </div>
          </div>
        </div>
        <div class="flex-x">
          <div v-for="(item, index) in goodsList" :key="item.id">
            <div v-if="index % 2 != 0" class="boardGoods-item-scroll">
              <img
                :src="fileBaseUrl + item.coverImg"
                class="board-img"
                style="width:100px"
              >
              <div class="board-title app-space-ell-1">{{ item.title }}</div>
              <div class="board-price">￥小程序查看</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <ModuleNotConfig v-else :module="module" />
</template>

<script>
import { getShelfList } from '@/views/wxaMallModule/api/shelf'
import {getPlanShelfList} from "@/api/reservation";
export default {
  props: {
    module: {
      type: Object
    },
    fileBaseUrl: {
      type: String
    }
  },
  data() {
    return {
      shelfId: null,
      goodsList: []
    }
  },
  watch: {
    module: {
      handler() {
        if (this.module.modules?.length) {
          this.getShelfList()
        } else {
          this.goodsList = []
        }
      },
      deep: true,
      immediate: true
    }
  },
  mounted() {
    if (this.module.modules?.length) {
      this.getShelfList()
    }
  },
  methods: {
    getShelfList() {
      if (this.module.modules[0].biz.type === 'RESERVATION_SHELF') {
        getPlanShelfList([this.module.modules[0].biz.params.shelfId]).then(
          (res) => {
            this.goodsList = res.data[0].planList.splice(0, 6)
          }
        )
      } else {
        getShelfList([this.module.modules[0].biz.params.shelfId]).then(
          (res) => {
            this.goodsList = res.data[0].goodsList.splice(0, 6)
          }
        )
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.boardGoods {
  overflow: hidden;
  .board-img {
    border-radius: 10px 10px 10px 0px;
    width: 100px;
    height: 100px;
  }
  .board-img-default {
    border-radius: 10px;
    width: 111px;
    height: 133.5px;
  }

  .board-title {
    width: 100px;
    font-size: 13.5px;
    font-family: PingFang SC;
    font-weight: bold;
    color: #000000;
    margin-bottom: 7px;
    margin-top: 5px;
  }
  .board-price {
    font-size: 16px;
    font-family: Source Han Sans SC;
    font-weight: bold;
    color: #e64340;
  }
  .title-div {
    align-items: flex-end;
    margin-bottom: 13px;
  }

  .title-text {
    font-size: 16.5px;
    font-family: PingFang SC;
    font-weight: bold;
    color: #000000;
  }
  .subtitle-text {
    font-size: 13.5px;
    font-family: PingFang SC;
    font-weight: 400;
    color: #888888;
    margin-left: 9px;
  }
  .boardGoods-item {
    margin-bottom: 17px;
  }
  .boardGoods-item-scroll {
    margin-right: 10.5px;
    margin-bottom: 19px;
  }
  .board-bg {
    display: block;
  }
}
.more {
  margin: 0 auto;
  color: #b2b2b2;
  font-size: 14.5px;
  font-family: PingFang SC;
  font-weight: 400;
}
</style>
